<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/iconfont.css" />
  <link rel="stylesheet" href="./css/results.css" />
  <link rel="stylesheet" href="./css/player.css" />
  <link rel="stylesheet" href="./css/comment.css">
  <link rel="stylesheet" href="./css/video.css">
</head>

<body>
  <div id="player">
    <h2 class="title">猿听音乐</h2>
    <div class="search">
      <input type="text" v-model.trim="keywords" @keyup.enter="searchMusic" />
      <button @click="searchMusic">
        <span class="iconfont icon-search"></span>
      </button>
    </div>
    <div class="tab-wrapper">
      <!-- tab栏 -->
      <!-- 5. 
        路由跳转标签设置
        使用 router-link 进行跳转，最终解析的结果是一个 a 标签，这个也叫  声明式导航
        我们也可以类似 js 里面 location.href=xxx 编程导航，这个也叫 编程式导航
       -->
      <!-- 路由标签上可以设置 active-class 属性代表激活之后的状态 -->
      <!-- <div class="tab-bar">
        <router-link to="/res" class="bar-item" active-class="active">搜索结果</router-link>
        <router-link to="/play" class="bar-item" active-class="active">歌曲播放</router-link>
        <router-link to="/mv" class="bar-item" active-class="active">视频播放</router-link>
        <router-link to="/com" class="bar-item" active-class="active">歌曲评论</router-link>
      </div> -->
      <!-- 对应的内容区域 -->
      <div class="tab-content">
        <!-- 6. 路由显示控制区域 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/html" id="my-results">
    <div class="result-wrapper">
        <div class="song" v-for="(item, index) in musicList" :key="'musics'+index">
          <div class="name">
            <span class="iconfont icon-play" @click="palyMusic(item.id)"></span>
            {{ item.name }}
            <span class="iconfont icon-editmedia"></span>
          </div>
          <div class="singer">{{ item.artists | formatSinger }}</div>
          <div class="album">《 {{ item.album.name }} 》</div>
          <!-- 歌曲时长，需要显示成为  xx分xx秒，过滤器自行实现 -->
          <div class="time">{{ item.duration }}</div>
        </div>
    </div>
</script>
<script type="text/html" id="my-player">
    <div class="player">
        <div class="left">
          <img class="disc" src="./img/disc.png" alt="">
          <img class="cover" src="./img/cover.png" alt="">
        </div>
        <div class="right">
          <div class="title"><img src="./img/tag.png" alt=""><span>放个大招给你看</span> </div>
          <div class="singer">歌手: <span>尼古拉斯赵四</span></div>
          <div class="album">所属专辑: <span>我就是我</span></div>
          <audio class="audio" controls src=""></audio>
          <ul class="lyric-container">
            <li class="lyric">难以忘记</li>
            <li class="lyric">初次见你</li>
            <li class="lyric">那双迷人的小眼睛</li>
          </ul>
        </div>
    </div>
</script>
<script type="text/html" id="my-video">
    <div class="video">
        <div class="title-wrapper">
          <span class="tag">MV</span>
          <span class="title">冲动的惩罚</span>
          <span class="artist">刀郎</span>
        </div>
        <video src="" controls></video>
    </div>
</script>
<script type="text/html" id="my-comment">
    <div class="comment-wrapper">
        <div class="items">
          <div class="item">
            <div class="left">
              <img src="./img/icon.jpg" alt="">
            </div>
            <div class="right">
              <div class="top">
                <span class="user">阿木木:</span>
                <span
                  class="content">写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心</span>
              </div>
              <div class="bottom">
                <div class="time">2016年9月18日</div>
                <div class="like-wrapper">
                  <span>👍</span>(6666)
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="left">
              <img src="./img/icon.jpg" alt="">
            </div>
            <div class="right">
              <div class="top">
                <span class="user">阿木木:</span>
                <span
                  class="content">写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心</span>
              </div>
              <div class="bottom">
                <div class="time">2016年9月18日</div>
                <div class="like-wrapper">
                  <span>👍</span>(6666)
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="left">
              <img src="./img/icon.jpg" alt="">
            </div>
            <div class="right">
              <div class="top">
                <span class="user">阿木木:</span>
                <span
                  class="content">写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心写歌的人假正经，唱歌的人最矫情，听歌的人最用心</span>
              </div>
              <div class="bottom">
                <div class="time">2016年9月18日</div>
                <div class="like-wrapper">
                  <span>👍</span>(6666)
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</script>

<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
<script src="./lib/axios.js"></script>
<script src="./lib/mlist.js"></script>
<script>

  console.log(mlist);
  axios.defaults.timeout = 3000
  axios.defaults.baseURL = "http://localhost:3000"

  // 1. 创建路由组件
  const Results = {
    template: '#my-results',
    data() {
      return {
        musicList: []
      }
    },
    // 拿到 路由跳转携带过来的 参数，发出 axios 请求（默认就要执行）
    // 大家要注意：created 会执行几次？监听路由地址的变化，再发出请求
    // watch 可以观察 data 中声明的响应式数据对象，还可以监听 props 传递的动态参数，还可以监听路由地址变化
    watch: {
      '$route.params.keyword'() {
        console.log("参数发生了变化");
        this.getMusicList();
      }
    },
    created() {
      // $route 用来接收数据，$router 用来编程式导航跳转路由
      // console.log(this.$route.query.keywords);
      console.log(this.$route.params.keyword);
      this.getMusicList();
    },
    methods: {
      async getMusicList() {
        try {
          let res = await axios.get('/search?keywords=' + this.$route.params.keyword);
          console.log(res.data.result.songs);
          this.musicList = res.data.result.songs;
        } catch (err) {
          // 
          this.musicList = mlist
        }

      },
      palyMusic(id) {
        // 播放音乐去到的是另外一个 页面路由
        this.$router.push('/play/' + id)
      }
    },
    filters: {
      formatSinger(val) {
        let temStr = '';
        val.map(item => {
          temStr += item.name + " "
        })
        return temStr
      }
    }
  }
  const Player = {
    template: '#my-player'
  }
  const Video = {
    template: '#my-video'
  }
  const Comment = {
    template: '#my-comment'
  }

  // 2. 创建路由规则
  const routes = [
    {
      path: '/',
      // 我们可以使用 重定向 的方式来进行默认的路由系统跳转
      redirect: '/res/神话'
    },
    {
      // 声明一个 动态路由，使用 一个 : 代表的是绑定了一个动态的值
      path: "/res/:keyword",
      name: 'res',
      component: Results
    },
    {
      path: "/play/:id",
      name: 'play',
      component: Player
    },
    {
      path: "/mv",
      name: 'mv',
      component: Video
    },
    {
      path: "/com",
      name: 'com',
      component: Comment
    }
  ]

  // 3. 创建路由实例化对象
  const router = new VueRouter({
    routes
  })

  // 4. 将 router 对象挂载到 Vue 实例上
  new Vue({
    el: "#player",
    router,
    data: {
      keywords: ""
    },
    methods: {
      searchMusic() {
        if (!this.keywords) {
          alert("搜索歌曲输入不允许为空！");
          return;
        }
        // 发出 axios 请求？
        // 进行路由跳转，这里使用 $router 方法就可以实现跳转了！编程式导航！
        // 我们输入的参数，也要传递到 路由页面组件 上！
        // console.log(this);

        // 第一种路由传参的方法，query 查询字符串传参，传递的数据会直接显示在地址栏上，刷新页面不会丢失
        // this.$router.push('/res?keywords=' + this.keywords);
        // 第二种路由传参的方法，动态路由传参，传递的数据会直接显示在地址栏上，刷新页面不会丢失
        this.$router.push('/res/' + this.keywords)

        // 我们也可以使用 对象的方式进行跳转，可以基于 path 可以基于 name
        // this.$router.push({
        //   path: '/res/' + this.keywords
        // })

        // 基于 name 进行跳转，这个时候的参数需要额外配置
        // this.$router.push({
        //   name: 'res',
        //   params: {
        //     keyword: this.keywords
        //   }
        // })

        // 路由传参的第三种方式，基于 params 传参，但是没有显示的声明动态路由
        // 地址栏不会显示数据，刷新页面后 数据会丢失，并且注意，这里必须使用 name 调用，Vue3 已经取消了！
        // 这个 因为其不确定性，所以我们真实开发几乎不用，但是面试官可能会问到
        // this.$router.push({
        //   name: 'res',
        //   params: {
        //     keyword: this.keywords
        //   }
        // })

      }
    }
  })
</script>